<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_head :: head}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/">首页</a>
            <a href="JavaScript:;">管理</a>
            <a>
              <cite>审批管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.open('发起申请','/user/apply',700,600)"><i class="layui-icon"></i>发起申请</button>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main" style="min-height: 450px;">
          <form class="layui-form" style="padding: 0 45px;">
            <table class="layui-table" lay-size="lg">
              <colgroup>
                <col width="200">
                <col width="300">
                <col width="200">
                <col width="300">
              </colgroup>
              <tbody>
              <tr>
                <td style="text-align: right;">流程状态</td>
                <td>
                  <div style="width: 180px;">
                    <select name="status">
                      <option value="0">未提交</option>
                      <option value="12">已提交</option>
                      <option value="1">已批准</option>
                      <option value="2">不批准</option>
                    </select>
                  </div>
                </td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: center;">
                  <button class="layui-btn" lay-submit lay-filter="find"><i class="layui-icon layui-icon-search"></i> 查 询</button>
                </td>
              </tr>
              </tbody>
            </table>
          </form>
          <br>
          <table id="process" lay-filter="process"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  layui.use(['form', 'table'], function () {
    var form = layui.form;
    var table = layui.table;
    var hasTable = false;

    //监听提交
    form.on('submit(find)', function (data) {
      var jsonData = data.field
      if (jsonData.status == 0) {
        table.render({
          elem: '#process',
          where: {"status": 2}
          , url: '/admin/getApproval'
          , page: true //开启分页
          ,parseData: function(res){ //res 即为原始返回的数据
            return {
              "code": res.code,
              "msg": res.message,
              "count": res.total,
              "data": res.data
            };
          }
          , cols: [
            [ //表头
              {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
              , {field: 'username', title: '用户名', width: 150, sort: true}
              , {
              field: 'businessType', title: '流程类型', width: 150, sort: true, templet: function (data) {
                if (data.businessType == 1) {
                  return "人员流程";
                } else {
                  return "其他流程";
                }
              }
              , sort: true
            }
              , {field: 'processName', title: '流程名称', width: 150, sort: true}
              , {field: 'handleGroup', title: '可处理组', width: 120, sort: true}
              , {
              field: 'handleUser', title: '指定处理人', width: 120, templet: function (d) {
                if (d.handleUser == null) {
                  return "无";
                }
              }
              , sort: true
            }
              , {field: 'createTime', title: '发起时间', width: 150, sort: true}
              , {field: 'updateTime', title: '更新时间', width: 150, sort: true}
              , {
              field: 'processStatus', title: '流程状态', width: 100, templet: function (d) {
                if (d.processStatus == 2) {
                  return '<b style="color: #009688;">未审批</b>';
                } else {
                  return "未知";
                }
              }
              , sort: true
            }
              , {field: 'remarks', title: '备注', width: 200}
              , {
              fixed: 'right', title: '操作', width: 200, templet: function (d) {
                var html = '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="see(\'' + d.processId + '\')">流程图</button>';
                if (d.processStatus === "2") {
                  html += '<button class="layui-btn layui-btn-xs" onclick="approval(\'' + d.processId + '\',2)">审 批</button>'
                }
                return html;

              }
            }
            ]
          ]
        });
      } else {
        table.render({
          where: {"status": jsonData.status},
          elem: '#process'
          , url: '/admin/getApprovalHistory'
          , page: true //开启分页
          ,parseData: function(res){ //res 即为原始返回的数据
            return {
              "code": res.code,
              "msg": res.message,
              "count": res.total,
              "data": res.data
            };
          }
          , cols: [
            [ //表头
              {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
              , {field: 'username', title: '人员账号', width: 120, sort: true}
              , {field: 'name', title: '人员名称', width: 120, sort: true}
              , {
              field: 'businessType', title: '流程类型', width: 120, sort: true, templet: function (data) {
                if (data.businessType == 1) {
                  return "人员流程";
                } else {
                  return "其他流程";
                }
              }
              , sort: true
            }
              , {field: 'processName', title: '流程名称', width: 120, sort: true}
              , {field: 'handleGroup', title: '处理人部门', width: 120, sort: true}
              , {field: 'handleUsername', title: '处理人账号', width: 120}
              , {field: 'handleName', title: '处理人名称', width: 120}
              , {field: 'handleTime', title: '处理时间', width: 150, sort: true}
              , {
              field: 'status', title: '处理状态', width: 100, templet: function (d) {
                if (d.status == 1) {
                  return '<b style="color: blue;">同意</b>';
                } else if (d.status == 2) {
                  return '<b style="color: red;">不同意</b>';
                }
              }
              , sort: true
            }
              , {field: 'remarks', title: '备注', width: 220}
              , {
              fixed: 'right', title: '操作', width: 200, templet: function (d) {
                var html = '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="see(\'' + d.processId + '\')">流程图</button>';
                html += '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="see(\'' + d.processId + '\')">查看</button>';
                return html;
              }
            }
            ]
          ]
        });
      }
      return false;
    });

  });

  function see(processId) {
    window.open('/processDetail/' + processId)
  }

  function approval(processId, status) {
    window.open('/admin/approvalLeave/' + processId + '?status=' + status)
  }

  function detail(processId) {

  }
</script>
</html>
